<template>
  <div class="switch-list">
    <ul class="switch-ul">
      <li class="switch-minbox" v-for="(item,index) in SwitchData" 
      :key="index"
      @click="ClickIndex = index"
      :style="{
        color: ClickIndex == index ? '#000' : 'gray',
        backgroundColor: ClickIndex == index ? '#bfa' : '#fff'
      }"
      >
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="'#icon-' +(ClickIndex == index ? item.icon[0] : item.icon[1])"></use>
      </svg>
      {{item.title}}</li>
    </ul>
    <switch-item :list="SwitchData[ClickIndex]"></switch-item>
  </div>
</template>

<script>
import SwitchItem from './item.vue'
export default {
  name: 'SwitchList',

  data() {
    return {
      SwitchData: [
        {
          title: '资讯', 
          icon: ['zixun','zixun-copy'],
          list: [
            {url: 'JavaScript:;', text: '资讯1',id: 1},{url: 'JavaScript:;', text: '资讯2',id: 2},
            {url: 'JavaScript:;', text: '资讯3',id: 3},{url: 'JavaScript:;', text: '资讯4',id: 4},
            {url: 'JavaScript:;', text: '资讯5',id: 5},{url: 'JavaScript:;', text: '资讯6',id: 6},
          ]
        },
        {
          title: '文章', 
          icon: ['wenzhang','wenzhang-copy'],
          list: [
            {url: 'JavaScript:;', text: '文章1'},{url: 'JavaScript:;', text: '文章2'},
            {url: 'JavaScript:;', text: '文章3'},{url: 'JavaScript:;', text: '文章4'},
            {url: 'JavaScript:;', text: '文章5'},{url: 'JavaScript:;', text: '文章6'},
          ]
        },
        {
          title: '话题', 
          icon: ['chaojihuati','chaojihuati-copy'],
          list: [
            {url: 'JavaScript:;', text: '话题1'},{url: 'JavaScript:;', text: '话题2'},
            {url: 'JavaScript:;', text: '话题3'},{url: 'JavaScript:;', text: '话题4'},
            {url: 'JavaScript:;', text: '话题5'},{url: 'JavaScript:;', text: '话题6'},
          ]
        },
        {
          title: '热门', 
          icon: ['remen','remen-copy'],
          list: [
            {url: 'JavaScript:;', text: '热门1'},{url: 'JavaScript:;', text: '热门2'},
            {url: 'JavaScript:;', text: '热门3'},{url: 'JavaScript:;', text: '热门4'},
            {url: 'JavaScript:;', text: '热门5'},{url: 'JavaScript:;', text: '热门6'},
          ]
        },
      ],
      ClickIndex: 0
    };
  },

  props:{
    result:Object
  },

  watch: {
    // 初始化
    result(newVal){
      this.SwitchData[0].list = newVal.message || []
      this.SwitchData[1].list = newVal.article || []
      this.SwitchData[2].list = newVal.topics || []
      this.SwitchData[3].list = newVal.host.sort((a,b) => b.visit - a.visit) || []
    }
  },

  components: {
    SwitchItem
  }
};
</script>

<style scoped>
.switch-list{
  width: 400px;
  margin-top: 30px;
  border: 1px solid gray;
  overflow: hidden;
  font-size: 0.8rem;
  border-right: none;
}
.switch-ul{
  display: flex;
}
.switch-list .switch-minbox{
  width: 25%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #000;
}
</style>